<template>
  <div class="ticket">
    <a-card title="博物馆列表" :bordered="false">
      <template #extra>
        <a-button type="primary" @click="showAddMuseumModal">
          添加博物馆
        </a-button>
      </template>
      
      <a-table :columns="columns" :data-source="museums" :loading="loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="editMuseum(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定要删除这个博物馆吗？"
                @confirm="deleteMuseum(record)"
              >
                <a class="danger">删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 添加/编辑博物馆对话框 -->
    <a-modal
      v-model:visible="modalVisible"
      :title="modalTitle"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form :model="museumForm" :rules="rules" ref="museumFormRef">
        <a-form-item label="博物馆名称" name="name">
          <a-input v-model:value="museumForm.name" />
        </a-form-item>
        <a-form-item label="预约API" name="api">
          <a-input v-model:value="museumForm.api" />
        </a-form-item>
        <a-form-item label="描述" name="description">
          <a-textarea v-model:value="museumForm.description" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

const columns = [
  {
    title: '博物馆名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '预约API',
    dataIndex: 'api',
    key: 'api',
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '操作',
    key: 'action',
  },
]

const museums = ref([
  {
    key: '1',
    name: '故宫博物院',
    api: 'https://api.example.com/gugong',
    description: '中国明清两代的皇家宫殿',
  },
  {
    key: '2',
    name: '国家博物馆',
    api: 'https://api.example.com/guobo',
    description: '中国最大的综合性博物馆',
  },
])

const loading = ref(false)
const modalVisible = ref(false)
const modalTitle = ref('添加博物馆')
const museumFormRef = ref(null)

const museumForm = reactive({
  name: '',
  api: '',
  description: '',
})

const rules = {
  name: [{ required: true, message: '请输入博物馆名称' }],
  api: [{ required: true, message: '请输入预约API' }],
}

const showAddMuseumModal = () => {
  modalTitle.value = '添加博物馆'
  modalVisible.value = true
  museumForm.name = ''
  museumForm.api = ''
  museumForm.description = ''
}

const editMuseum = (record) => {
  modalTitle.value = '编辑博物馆'
  modalVisible.value = true
  Object.assign(museumForm, record)
}

const deleteMuseum = (record) => {
  const index = museums.value.findIndex(item => item.key === record.key)
  if (index > -1) {
    museums.value.splice(index, 1)
    message.success('删除成功')
  }
}

const handleModalOk = () => {
  museumFormRef.value.validate().then(() => {
    if (modalTitle.value === '添加博物馆') {
      museums.value.push({
        key: Date.now().toString(),
        ...museumForm,
      })
      message.success('添加成功')
    } else {
      const index = museums.value.findIndex(item => item.key === museumForm.key)
      if (index > -1) {
        museums.value[index] = { ...museumForm }
        message.success('更新成功')
      }
    }
    modalVisible.value = false
  })
}

const handleModalCancel = () => {
  modalVisible.value = false
}
</script>

<style scoped>
.ticket {
  padding: 24px;
}

.danger {
  color: #ff4d4f;
}
</style> 